<template>
  <view class="container">
    <!-- 表单内容 -->
    <form @submit="formSubmit">
      <!-- 其他表单项 -->
      <view class="form-item">
        <text>用户名称：</text>
        <input type="text" placeholder="请输入用户名称" v-model="formRes.usetime" />
      </view>
      <view class="form-item">
        <text>用户密码：</text>
        <input type="password" placeholder="请输入用户密码" v-model="formRes.mid" />
      </view>
      <!-- 图片上传部分 -->
      <view class="form-item">
        <view class="uploader-list">
          <block v-for="(item, index) in fileList" :key="index">
            <image class="upload-img" :src="item" mode="aspectFill" />
            <view class="delete-icon" @click="deleteImg(index)">删除</view>
          </block>
          <view class="uploader-item" v-if="fileList.length < maxCount" @click="chooseImage">
            <text class="uploader-plus-icon">+</text>
            <text>点击上传</text>
          </view>
        </view>
      </view>
      <!-- 提交按钮 -->
      <button form-type="submit">提交</button>
    </form>
  </view>
</template>

<script>
  import FormData from '../../utils/formData/formData.js'
  import http from '@/utils/http.js'
  export default{
    data() {
       return {
         formRes:{
           mid: 2,
           usetime: '2.5h',
           time: '2023-12-01 09:56:11',
           remake: 'wu',
           pictures:[]
         },
         fileList: [], // 已上传的图片列表
         maxCount: 3 // 最大上传图片数量
       }
    },
    methods:{
      // 选择图片的方法
      chooseImage() {
        uni.chooseImage({
          count: this.maxCount - this.fileList.length, // 默认9，我们这里最多选择3张
          sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认都有
          success: (res) => {
            // 将选择的图片添加到fileList中
            console.log(res);
            this.formRes.pictures = this.fileList.concat(res.tempFilePaths);
            console.log(this.formRes.pictures);
            // this.fileList = this.fileList.concat(res.tempFilePaths);
          }
        });
      },
      // 删除图片的方法
      deleteImg(index) {
        this.fileList.splice(index, 1); // 删除fileList中指定的图片
      },
      // 上传
      addFrom () {
        let formData = new FormData();
        // this.FormData.pictures = this.fileList
        for (let i in this.formRes) { //这里需要遍历对象，让每一个参数变成formdata格式
            if(i=='pictures'){ //files是我自定义的要上传的图片数组字段名
               this.formRes.pictures.forEach(filepath=>{ //这里需要每一张遍历一下，就是普通的字符串数组
                 formData.appendFile("pictures", filepath);
               })
            }else{ //这里是其他参数，正常拼接就行
               formData.append(i,this.formRes[i]);
            }
          }
        
        let data = formData.getData();
        
         uni.request({ // 这里用request
            url: 'http://10.63.75.108:8090/agriculture/add',
            data: data.buffer, // data已经给你分好值了，直接用即可
            method: 'post',
            timeout: 100000,
            header: {
               'content-type': data.contentType,
               // 'content-type': 'multipart/form-data',
            },
            success: (res) => {
                // 写成功后的逻辑
                console.log('成功');
            },
            fail: (err) => {
                // 写失败后的逻辑
                console.log(err,'错误');
            }
          }
        )
      },
      // 提交
      formSubmit(e) {
        // 这里应处理表单提交事件，包括图片和表单内容的上传
        console.log('表单数据：', this.formData);
        console.log('已上传图片列表：', this.fileList);
        this.addFrom()
        // 上传图片到服务端的逻辑在这里实现
        // 在这里添加必要的表单验证
        // 如果一切检验通过，则发送数据到服务器
      },
      
      
      
      
    }
  }
</script>

<style>
</style>